<template>
    <!-- 共享预约订单列表页 -->

    <div style="background-color: #f5f5f5; display: flex; flex-direction: column">
        <div class="tabBar">
            <NavTabs :tabs="tabs" :on-change="onChange"></NavTabs>
        </div>
        <div style="flex-grow: 1">
            <OrderList :list="list"></OrderList>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NavTabs from '@/components/nav-tabs/index.vue'
import OrderList from '@/activityPages/components/share-order-list.vue'

const tabs = [
    { id: 0, name: '全部' },
    { id: 1, name: '待使用' },
    { id: 2, name: '待支付' },
    { id: 3, name: '已完成' },
    { id: 4, name: '退款/售后' }
]
function onChange(item) {
    console.log('my order tab onChange', item)
}
// image', 'title', 'time', 'location', 'status', 'id
const list = ref([
    {
        id: 0,
        image: 'https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0',
        title: '共享办公',
        time: '2021-01-01 12:00:00',
        location: '上海市浦东新区',
        status: '待使用'
    },
    {
        id: 0,
        image: 'https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0',
        title: '办公室',
        time: '2021-01-01 12:00:00',
        location: '上海市浦东新区',
        status: '待使用'
    },
    {
        id: 0,
        image: 'https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0',
        title: '自助健身',
        time: '2021-01-01 12:00:00',
        location: '上海市浦东新区',
        status: '待使用'
    },
    {
        id: 0,
        image: 'https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0',
        title: '【2021年春节活动】2021春节活动',
        time: '2021-01-01 12:00:00',
        location: '上海市浦东新区',
        status: '待使用'
    },
    {
        id: 0,
        image: 'https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0',
        title: '【2021年春节活动】2021春节活动',
        time: '2021-01-01 12:00:00',
        location: '上海市浦东新区',
        status: '待使用'
    },
    {
        id: 0,
        image: 'https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0',
        title: '【2021年春节活动】2021春节活动',
        time: '2021-01-01 12:00:00',
        location: '上海市浦东新区',
        status: '待使用'
    },
    {
        id: 0,
        image: 'https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0',
        title: '【2021年春节活动】2021春节活动',
        time: '2021-01-01 12:00:00',
        location: '上海市浦东新区',
        status: '待使用'
    },
    {
        id: 0,
        image: 'https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0',
        title: '【2021年春节活动】2021春节活动',
        time: '2021-01-01 12:00:00',
        location: '上海市浦东新区',
        status: '待使用'
    },
    {
        id: 0,
        image: 'https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0',
        title: '【2021年春节活动】2021春节活动',
        time: '2021-01-01 12:00:00',
        location: '上海市浦东新区',
        status: '待使用'
    }
])
</script>

<style scoped lang="scss">
@import url('@/activityPages/style/card.css');
.tabBar {
    position: -webkit-sticky;
    position: sticky;
    top: var(--window-top);
    z-index: 99;
    background-color: white;
}
</style>
